<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>table</title>
    <style>
        .box {
            height: 1000px;
            width: 1000px;
            border: 1px solid black;
        }
    </style>

</head>

<body>
    <div class="box" id="box"></div>
    <input type="button" id="bt" value="查看效果" />
</body>
<script>
    var box = document.getElementById("box");

    for (var i = 0; i < 100; i++) {
        for (var j = 0; j < 100; j++) {
            var b = document.createElement("div");
            b.style.border = "1px solid blue";
            b.style.width = "8px";
            b.style.height = "8px";
            b.style.cssFloat = "left";
            box.appendChild(b);

            if (i % 2 == 0) {
                b.style.backgroundColor = "red";
            } else {
                b.style.backgroundColor = "green";
            }

            if (i == 50 && j == 50) {
                b.innerHTML = "1";
                b.style.backgroundColor = "white";

            }


        }
    }
    var oDiv = document.createElement('div');
    oDiv.innerHTML = "";
    oDiv.style.border = "1px solid red";
    oDiv.style.width = "1000px";
    oDiv.style.height = "10px";
    oDiv.style.backgroundColor = "black";
    document.body.appendChild(oDiv);





    window.onload = function() {
        var obt = document.getElementById("bt");
        var odiv = document.getElementById("box");
        obt.onclick = function() {
            odiv.parentNode.removeChild(odiv);
        }
    }
</script>



</html>